header {
  width: 100%;

  .top {
    width: 100%;
    height: 120px;
    // background-color: red;
    background-image: url('../assets/images/S-top.jpg');
    background-position: center;
    background-size: auto 120px;
    background-repeat: no-repeat;

  }

  .nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 1226px;
    height: 40px;
    background-color: #333333;

    .nav-p {
      margin-left: 4.44%;
      width: 60%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      >a {
        >li {
          font-size: 12PX;
          color: #b0b0b0;

          &:hover {
            color: white;
          }
        }

      }


      .ver-line {
        margin: 0px 7px;
        height: 12px;
        width: 1px;
        background-color: #424242;
      }
    }

    .list {
      position: relative;
      margin: 0;
      padding: 0;
      font-size: 12px;

      >ul {
        >li {
          padding: 0 19px;
          position: relative;
          float: left;
          font-size: 12px;
          background-color: #333;
          color: #b0b0b0;
          line-height: 40px;
          height: 40px;
          overflow: hidden;

          >p {
            display: inline-block;
            margin: 0 6px;
            font-weight: bold;
            transform: rotate(90deg);
          }

          .box {
            background-color: #fff;
            display: block;
            position: absolute;
            opacity: 0;
            // bottom: -100px;
            left: 0;
            width: 100px;
            // height: 100px;
            line-height: 28px;
            text-align: center;
            font-size: 12px;
            // transition: all 2s ease-in;

            >ul {
              >a {
                >li {
                  color: #000;

                  &:hover {
                    color: #FF6700;
                  }

                }

              }
            }
          }
        }

        >li:hover {
          background-color: #fff;
          overflow: visible;
          color: #FF6700;
          cursor: pointer;
        }

        >li:hover .box {
          display: block;
          opacity: 1;
          color: #FF6700;
        }
      }

      .clear {
        clear: both;
      }
    }

    .nav-r {
      width: 11%;
      margin-left: 47px;
    }

    .shopping {
      height: 100%;
      line-height: 40px;
      font-size: 12px;
      color: #b0b0b0;
      cursor: pointer;

      &:hover {
        background-color: #fff;
        color: #FF6700;
      }
    }
  }
}

footer {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  padding: 30px 0 30px 50px;
  font-size: 12px;
  background: #fafafa;

  .foot-left {
    margin-right: 10px;
  }

  .foot-right {
    .foot-text-one {
      ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        li {
          line-height: 18px;

          a {
            font-size: 12px;
            color: #757575;
            cursor: pointer;

            &:hover {
              color: #FF6700;
            }
          }
        }

        span {
          margin: 0 5px;
          width: 1px;
          height: 12px;
          background-color: #b0b0b0;
        }
      }
    }

    .foot-text-two {
      p {
        a {
          font-size: 12px;
          color: #b0b0b0;
          cursor: pointer;
        }

        .light {
          &:hover {
            color: #FF6700;
          }
        }
      }
    }
  }

  .foot-img {
    margin: 4px 0 15px;

    >a {
      img:first-child {
        width: 82px;
        height: 28px;
      }

      >div {
        display: inline-block;
        width: 105px;
        height: 40px;
        overflow: hidden;

        .foot-last {
          width: 105px;
          height: 40px;
        }
      }
    }
  }

  .foot-text-three {
    text-align: center;
    margin: 30px auto 0;
    font-family: '宋体';
    font-size: 28px;
    font-weight: bolder;
    color: #b0b0b0;
  }
}